<script lang="ts" setup>
import {ref} from "vue";
import { ArrowDown } from '@element-plus/icons-vue'


import type { TabsPaneContext } from 'element-plus'

const activeName = ref('first')
let topfilterlist = ref([
  {id:1, name:'first',label:'热门筛选',list:['天安门广场','王府井','北京大家']},
  {id:2, name:'second',label:'地铁机场',list:['北京南站','北京西站','北京火车站']},
  {id:3, name:'third',label:'商业区',list:['三里屯','国贸地区','西直门']},
  {id:4, name:'fourth',label:'酒吧街',list:['地标广场','太古里','外滩']},
])
let pricelist = ref(['100以下','100-200','200-500','500-1000','1000y以上'])
let filterList = ref([
  {title:'服务类型',list:['按摩','推拿','spa','刮痧']},
  {title:'支付类型',list:['线上支付','线上预约','线下支付']},
  {title:'热门店铺',list:['天之道足浴','足之道','水浴天下']},

])
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}
</script>

<template>
  <div class="topfilter">
    <div>
      <h4> 位置区域</h4>
    </div>
    <div>
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane :label="v.label" :name="v.name" v-for="v in topfilterlist" :key="v.id">
          <el-button v-for="(k,i) in v.list" size="small" type="info" :key="i">{{k}}</el-button>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div>
      <h4>价格区间</h4>
    </div>
    <div class="topfilter-price">
      <el-button size="small" type="info" plain v-for="(v,i) in pricelist" :key="i">{{v}}</el-button>
    </div>

    <div>
      <h4>高级筛选</h4>
    </div>
    <div class="topfilter-filter">
      <el-dropdown v-for="(v,i) in filterList" :key="i">
      <span class="el-dropdown-link">
        {{v.title}}
        <el-icon class="el-icon--right">
          <arrow-down/>
        </el-icon>
      </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item v-for="(k,i) in v.list" :key="i">{{k}}</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>


<style scoped>

.topfilter{
  width: 1200px;
  display: grid;
  grid-template-columns: 104px 1fr;
  grid-template-rows: repeat(3, auto);
  margin-top: 70px;
}
.topfilter h4{
  line-height: 4rem;
  text-align: center;
}
.topfilter >div{
  border-bottom:1px solid#ddd ;

}
.topfilter .el-button:hover{
  background-color: var(--el-color-primary);
  border: 1px var(--el-color-primary) solid;
}
</style>